<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LayerSlider simple example</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../documentation/assets/css/doc.css">
	<link rel="stylesheet" href="../documentation/assets/css/font.css">
	<link href="http://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">
	<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
	<!--[if lt IE 9]>
		<script src="../documentation/assets/js/html5.js"></script>
	<![endif]-->

	<!-- LayerSlider stylesheet -->
	<link rel="stylesheet" href="../layerslider/css/layerslider.css" type="text/css">
	<!-- External libraries: jQuery & GreenSock -->
	<script src="../layerslider/js/jquery.js" type="text/javascript"></script>
	<script src="../layerslider/js/greensock.js" type="text/javascript"></script>
	<!-- LayerSlider script files -->
	<script src="../layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
	<script src="../layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>

	<style>

		/*
			You can add your custom layer styles
			in the style attribute of the layer,
			to a style element or
			to an external css file
		*/

		#layerslider * {
			font-family: Lato, 'Open Sans', sans-serif;
			font-weight: 300;
		}

		#layerslider h1 {
			font-size: 30px;
			color: #eee;
		}

		#layerslider h2 {
			font-size: 40px;
			color: #111;
		}

	</style>

</head>
<body class="nobg">
	<div id="slider-wrapper">

		<!-- LayerSlider start -->

		<div id="layerslider" style="width: 1280px; height: 720px; max-width: 1280px;">

			<!-- slide one start -->

			<div class="ls-slide" data-ls="slidedelay: 7000; transition2d: 75,79;">

				<!-- slide background image -->

				<img src="sliderimages/jellyfish-blur.jpg" class="ls-bg" alt="Slide background"/>

				<!-- layer one -->

				<h1 class="ls-l" style="top: 100px; left: 100px;" data-ls="
					offsetxin: 0;
					offsetxout: 300;
					offsetyin: top;
					offsetyout: 300;
					durationin: 2000;
					durationout: 2000;
					delayin: 2000;
					rotateyin: 60;
				">It's a clownfish!</h1>

				<!-- layer two -->

				<img class="ls-l" style="left: 30%; top: 50%;" src="sliderimages/clownfish.png" alt="Image layer" data-ls="
					offsetxin: left;
					offsetxout: right;
					offsetyin: 150;
					offsetyout: -250;
					fadein: false;
					fadeout: false;
					easingin: easeoutquart;
					easingout: easeinquart;
					durationin: 2500;
					durationout: 2500;
					delayin: 500;
					showuntil: 1;
				">

			</div>

			<!-- slide one end -->

			<!-- slide two start -->

			<div class="ls-slide" data-ls="slidedelay: 5000; transition2d: 5; timeshift: -1000;">

				<!-- slide background image -->

				<img src="sliderimages/slide-b-bg.jpg" class="ls-bg" alt="Slide background"/>

				<!-- layer one -->

				<h2 class="ls-l" style="top: 600px; left: 50%;" data-ls="
					offsetxin: -100;
					offsetxout: 0;
					offsetyin: 0;
					offsetyout: bottom;
					durationin: 2500;
					delayin: 1000;
					skewxin: 60;
				">We like Tucans :)</h2>

				<!-- layer two -->

				<img class="ls-l" style="left: 650px; top: 70px;" src="sliderimages/tucan.png" alt="Image layer" data-ls="
					offsetxin: right;
					offsetxout: 0;
					offsetyin: 200;
					offsetyout: bottom;
					rotatein: 50;
					rotateout: -20;
					fadein: false;
					fadeout: false;
					easingin: easeoutquart;
					easingout: easeinquart;
					durationin: 2500;
					delayin: 500;
				">

			</div>

			<!-- slide two end -->

		</div>

		<!-- LayerSlider end -->

	</div>

	<div id="example-wrapper">
		<div id="example">
			<section>
				<h4>Simple example</h4>
				<p>
					This is a a really simple example slider that focuses on the main HTML markup for easier understanding.<br>
					It containes only two slides and two layers in each slides.<br>Please open the <code>simplest-example.html</code> file in a text editor to see the commented HTML markup of the slider.
				</p>
				<p>
					<a href="../documentation/documentation.html#slider-examples">back to examples</a>
				</p>
			</section>
		</div>
	</div>

	<!-- Initializing the slider -->
	<script>
		jQuery("#layerslider").layerSlider({
			pauseOnHover: false,
			skinsPath: '../layerslider/skins/'
		});
	</script>
</body>
</html>
